<template lang="html">
    <transition name="fade">
        <div class="page-loader" v-if="loading">
            <div class="loader-inner">
                <div></div>
                <div></div>
            </div>
            <div class="loader-text">加载中...</div>
        </div>
    </transition>
</template>

<script>
export default {
    name:'loading',
    data: () => ({
        loading: false,
    }),
    methods: {
        start() {
            this.loading = true;
        },
        finish() {
            this.loading = false;
        },
    },
};
</script>

<style scoped>
.page-loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    line-height: 30px;
    color: #fff;
    background: #007dff;
    padding: 7px 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 3px 0px #007dff;
}

.page-loader .loader-text {
    margin-left: 40px;
}

.page-loader .loader-inner {
    position: relative;
}

.page-loader .loader-inner > div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    border-radius: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.page-loader .loader-inner > div:first-child {
    background: #fff;
    height: 16px;
    width: 16px;
    top: 7px;
    left: 7px;
    -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}

.page-loader .loader-inner > div:last-child {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 2px solid;
    border-color: #fff transparent #fff transparent;
    -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>